<template>
  <el-dialog
    v-el-drag-dialog
    class="activity-dialog"
    :title="type | titleText"
    :visible.sync="isShow"
    width="1100px"
    append-to-body
    @closed="close"
  >
    <el-form
      ref="dataForm"
      class="form"
      :model="form"
      label-position="right"
      label-width="110px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户编号:" prop="csmCode">
            <el-input v-model="form.csmCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称:" prop="csmName">
            <el-input v-model="form.csmName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话:" prop="csmPhone">
            <el-input v-model="form.csmPhone" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      show-summary
      :summary-method="getSummaries"
      :immediate-fetch="false"
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { queryMonthAccCsmMonthlyBillFundList } from '@/api'
  import dayjs from 'dayjs'
  export default {
    filters: {
      titleText(val) {
        switch (val) {
        case 1:
          return '查看未结明细'
        case 2:
          return '查看应结明细'
        }
      }
    },
    data() {
      return {
        isShow: false,
        form: {
          csmPhone: '',
          csmName: '',
          csmCode: ''
        },
        // actionColWidth: 80,
        tableData: {
          total: 0,
          data: []
        },
        type: 1,
        rowData: {},
        orderTypeMap: [
          { value: 1, desc: '订单', key: 'ORDER' },
          { value: 2, desc: '回收单', key: 'RECYCLE' },
          { value: 4, desc: '退货单', key: 'RECYCLE_GAS' },
          { value: 8, desc: '结转', key: 'CARRYOVER' },
          { value: 16, desc: '订单', key: 'SWALE' }
        ]
      }
    },
    computed: {
      column() {
        return [
          {
            type: 'index'
          },
          {
            prop: 'csmCode',
            label: '客户编号',
            width: 110
          },
          {
            label: '日期',
            prop: 'signDt',
            width: 100,
            align: 'center',
            render: (h, { row, $index }) => {
              return <span>{row.signDt && dayjs(row.signDt).format('YYYY-MM-DD')}</span>
            }
          },
          {
            label: '单据类型',
            prop: 'orderType',
            width: 100,
            align: 'center',
            render: (h, { row, $index }) => {
              return <span>{this.orderTypeFormat(row.orderType)}</span>
            }
          },
          { label: '单据号', prop: 'orderCode', width: 120, align: 'center' },
          { label: '商品', prop: 'goodsDesc', width: 200, align: 'left' },
          {
            label: '数量',
            prop: 'goodsCount',
            width: 65,
            align: 'center'
          },
          {
            label: '金额',
            prop: 'treceivables',
            width: 120,
            align: 'right',
            render: (h, { row, $index }) => {
              return (
              <span>{row.treceivables === 0 ? '' : row.treceivables.toFixed(2)}</span>
              )
            }
          },
          { label: '责任机构', prop: 'orgName', width: 130, align: 'center' }
        ]
      }
    },
    methods: {
      show(type, data) {
        this.type = type
        this.rowData = data
        this.isShow = true

        for (const key in this.form) {
          this.form[key] = data[key]
        }
        this.fetchData({ currentPage: 1, pageSize: 20 })
      },
      close() {
        this.isShow = false
        this.tableData = {
          total: 0,
          data: []
        }
        this.$refs['dataForm'].resetFields()
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize,
          check: this.type,
          csmId: this.rowData.csmId,
          orgId: this.rowData.orgId,
          orgSNNo: this.rowData.orgSNNo
        }
        const res = await queryMonthAccCsmMonthlyBillFundList(query)
        if (res.status === 200) {
          this.tableData.data = res.data.rows
          if (currentPage === 1) this.tableData.total = res.data.total
        }
      },
      orderTypeFormat(val) {
        const index = this.orderTypeMap.findIndex((v) => {
          return v.value === val
        })
        if (index !== -1) return this.orderTypeMap[index].desc
        else return ''
      },
      // 合计方法
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '合计'
            return
          }
          if (column.property === 'orderCode' || column.property === 'orderType' || column.property === 'orgName') {
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        sums[sums.length - 1] = Number(sums[sums.length - 1]).toFixed(2)
        return sums
      }
    }
  }
</script>

<style lang="scss" scoped></style>
